<template>
    <div>
        <el-button  mb-2 @click="toggle">切换语言</el-button>
        <br>
        <el-config-provider :locale="locale">
            <el-table mb-1 :data="[]" />
            <el-pagination :total="100" />
        </el-config-provider>
    </div>

    <div>
        <div m="b-2">
            <el-checkbox v-model="config.autoInsertSpace">autoInsertSpace</el-checkbox>
        </div>
        <el-config-provider :button="config" :message="config">
            <el-button>中文</el-button>
            <el-button @click="open">消息展示限制</el-button>
        </el-config-provider>
    </div>

</template>
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
</script>
<script>
export default {
    data(){
        return{
            language: 'zh-cn',
            config: {
                autoInsertSpace: true,
                max: 3,
                msgCounter : 0
            }
        }
    },
    computed:{
        locale:{
            get:function(){
                return this.language==='zh-cn'? zhCn: en
            }
        }
    },
    methods:{
        toggle: function() {
            this.language = (this.language === 'zh-cn' ? 'en' : 'zh-cn')
        },
        open: function(){
            ElMessage('['+ this.config.msgCounter++ +']This is a message.')

        }
    }
}
</script>